Importing photos for drawing in Flash 

If you're thinking to print this, try setting the printer to 2 pages per sheet, double sided, and at draft ink quality. 
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Opening a new movie, I've removed all 
the panels that normally open on 
starting Flash, by right clicking and 
selecting 'close panel' 

All that remains then are 2 panels below 
the stage - the Actions panel which is 
currently minimized, and the Properties 
panel which is currently open 

These panels, and especially the 
properties panel are what's called 
'context sensitive' which simply means it 
will display information depending on 
what tool you have selected, and where 
in the program you have clicked. 

Note the properties of this new movie. It 
is currently sized at 500x400 pixels, with 
a white background, playing at 12 
frames per second, on a Flash 7 player. 
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To import a photo, first have one ready, 
preferably copied to the folder where 
you have saved your new movie. 

In Flash, click File>lmport>lmport to 
Stage, or key Ctrl R. 

Find the folder containing the image you 
want to import and click Open. 

This will import the image to your 
movie, place a copy of the image on the 
stage, and another copy in the movie's 
library. 

The library is a folder containing all the 
media that you import and create in 
your movie. To open the library, simply 
key F1 1 . 
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Resize the image by first clicking it to 
make sure it is selected, then by clicking 
the resize tool (circled). 

If you hold down the shift key when 
resize, the proportions of the image will 
be maintained. 

Position the image where you want it by 
using the arrow keys (shift arrow for 
bigger moves), or by clicking and 
dragging. 
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Create a new layer on the timeline by 
clicking the 'new layer' button circled. 

We are about to start drawing in our 
movie and we want to drawing to be on 
a separate layer. 

To prepare for drawing on this layer, 
make sure that the first frame of the 
new layer is selected. This will ensure 
that new elements drawn appear on that 
layer and in that frame. 
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I have selected the line tool (arrow 1 ) to 
do a rough sketch, tracing the image in 
the photo. The magnet graphic at the 
bottom of the tool bar (arrow 2) turns on 
and off the 'snap to' drawing aid. Snap to 
helps you join lines neatly, but can be a 
pain when you don't need it. 

To be absolutely sure, click the dot 
under the padlock graphic on the layer 
you don't want to draw on (arrow 2). 
This will lock the layer and prevent you 
from accidentally drawing on it. 

When you have finished making you 
sketch trace of your photo, find the 'eye' 
graphic next to the padlock. Now, 
clicking the dot under the eye on the 
photo's layer will hide the photo so you 
can see your drawing so far 
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Here's my drawing so far after hiding the 
photo layer. 

Notice the red cross on the photo layer? 
(arrow) This tells me that the image on 
that layer is currently hidden. To make 
it visible again, simply click the cross. 

As you can see, the line tool has made a 
pretty sketchy rendering of the image. 
Let's tidy it up... 
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• I have made the photo layer visible again 
and pressed Ctrl + to zoom in. 

• With the pointer tool (arrow) I am able 
to select, move, stretch and curve the 
lines depending on where I click with the 
tool. 

• If I click the end, or junction of 2 lines, 
it will stretch the lines. 

• If I click and drag near the middle of a 
line, it will curve. 

• If I click a line to select it, then click 
and drag, it will move the line. 

• This use of the pointer tool takes some 
getting used to, and it will take a little 
while to tidy up the sketch. 
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Here's a view of my effort to tidy up the 
line tool's sketch so far. Notice the slight 
curve in the lines? 

Compare it to the previous page and see 
what you think. 
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I have keyed Ctrl - to zoom back out, or 
the drop down menu in the top right 
(arrow) has a number of present views, 
including fit to window which can be 
helpful. 

I have finished tidying up my sketch. It 
took me about 15 minutes. Let's have a 
look at it without the picture behind 
it... 
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I have clicked the dot under the eye 
graphic on the layer I needed to hide so I 
could see the line drawing better. 

I'm pretty happy with that, now let's 
start adding some colour... 
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I have selected the 'paint bucket' tool 
(arrow) and changed the colour by 
clicking the colour fill drop down menu 
(arrow). 

Once I have selected the colour I want 
its simply a matter of filling the areas of 
the picture you want coloured. 

The paint bucket tool will fill any area 
where lines join. If the lines don't join 
the colour will either fill outside the 
area you wanted filled, or won't fill at 
all. 

At the bottom of the tool bar (under the 
colour selection box in this screen) are a 
range of buttons that you can use to tell 
the paint bucket to ignore small to large 
gaps in your line work. 
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Now I have finished colouring, you might 
notice in this screen that the line has 
been changed to black. To do this, 
simply select everything on your drawing 
layer by clicking the lay bar (arrow 1 ). 

Now click the drop down menu in the 
line colour box (arrow 2) and select the 
colour you want for the line work. 

This will change the colour of all the line 
work because you had everything on the 
layer selected. 

To change the colour of only some lines, 
just click the line to select it, then 
change it's colour in the same way. 
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• Now that the line work and colour fill is 
finished, its time to add and slightly 
animate a speech bubble for the scene. 

• I have selected the 'ellipse' tool, made 
sure that the line is black and the fill is 
white, then on a new layer have drawn 
the bubble by clicking and dragging. 

• Make sure you do it on a new layer! 

• If you make a mistake, key Ctrl Z for 
undo. 
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On the same new layer I have selected 
the 'text' tool (arrow 1 ) and used it to 
type some words. 

If you open the properties panel below 
(arrow 2) you can change the font, size 
etc of the text. 
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Now that you have created the speech 
bubble and added text, all on the same 
layer, you now have to select it all, 
group it as 1 graphic, and animate it. 

To select all the elements of the speech 
bubble, simply click the layer bar of the 
layer in which you drew the speech 
bubble. 

Now click Modify from the main menu, 
and select 'convert to symbol' from the 
list of options. 

When symbol conversion window comes 
up, you name the symbol and select 
graphic from the 3 symbol options 

This has grouped the elements of the 
speech bubble into one graphic in the 
movies library. (F1 1 to see library) 
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Now we want to animate the speech 
bubble. 



Un rn™ jiia J l«h t>J. Itiefeiimn.il KUlA | riran* jr.n phut*! 1 ] 



Hi Ei> fell h 



>1tfc 



S P 
i A 

o q. 
j s 

t3 'J 

* * 

J*' if 

O Qi 

• 18 

rt 




.i^T.ji-irf-'--." 

4 3wl 



- 




Think about how long it would take 
someone to read the speech bubble and 
consider it in terms of your movie's 
frame rate (12 fps) 

I have selected the 45 th frame of the 
speech bubble's layer and inserted a 
keyframe by pressing F6. (A keyframe is 
used wherever the is to be a change in 
the contents of the layer). 

I want my speech bubble to fade up, be 
visible for about 3-4 seconds, then fade 
out. So I have added keyframes to every 
frame where the fades start to happen 
and finish happening. 
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Now that I have the keyframes in place, 
I need to change all the frames on the 
speech buuble's timeline into 'tweening 
frames'. This will enable Flash to 
automatically create the transitions 
between the keyframes. 

To do this select all the frames by 
clicking the layer bar. 

Right click anywhere in the selected 
frames and select 'create motion tween' 
from the drop down menu. 

You should be able to notice that the 
frames have changed colour and that 
they have an arrow stretching between 
the keyframes 
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Now we need to change the look of the 
speech bubble in the keyframes. I am 
going to make the speech bubble in the 
first key frame be invisible, and the 
second keyframe visible. The tweening 
will create the fade up from invisible to 
visible for me once I have made this 
simple changes. 

To make the first keyframe of the 
speech bubble invisible, I use the pointer 
tool to click to select the keyframe. 
Then I click to select the speech bubble. 

Now open the properties panel. In the 
color field (arrow) select 'alpha' from the 
drop down menu, and use the slider to 
make the speech bubble's alpha value 0% 
- in other words, invisible. 
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Do the same with the alpha value on the 
last key frame on the speech bubble. 

Remember - click the keyframe, then 
click the graphic, then change the 
properties. 

Now that we have made the first and the 
last keyframes invisible, and kept the 
second and the second last keyframes 
visible, the tween will create the effect 
of a fade up and fade out. 

To test you work, make sure it is saved, 
and key Ctrl Enter. This will export and 
play your movie. 
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And there it is! 
Importing a photo 

Tracing that photo with the line drawing 
tools 

Colouring the line drawing 

Creating an animated speech bubble 

If you are thinking to use this technique 
for your Internet make sure you delete 
the layer with the photo to reduce the 
file size. 
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